<template>
  <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
    :header-cell-style="{ background: '#8cc5ff' }">
    <el-table-column prop="purchaseOrderNumber" label="采购订单编号" width="180">
    </el-table-column>
    <el-table-column prop="supplierName" label="供应商名称" width="180">
    </el-table-column>
    <el-table-column prop="purchaseOrderName" label="采购订单名称">
    </el-table-column>
    <el-table-column prop="productName" label="产品名称">
    </el-table-column>
    <el-table-column prop="productNumber" label="产品编号">
    </el-table-column>
    <el-table-column prop="purchaseQuantity" label="采购数量">
    </el-table-column>
    <el-table-column prop="warehousingQuantity" label="入库数量">
    </el-table-column>
    <el-table-column prop="notWarehousedReturnQuantity" label="未入库 - 退货数量">
    </el-table-column>
    <el-table-column prop="warehousedReturnQuantity" label="已入库 - 退货数量">
    </el-table-column>
    <el-table-column prop="totalReturnQuantity" label="总退货数量">
    </el-table-column>
    <el-table-column prop="toBeWarehousedQuantity" label="待入库数量">
    </el-table-column>
  </el-table>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  data() {
    return {
      tableData: [
        {
          purchaseOrderNumber: 'CGDD230918 - 01',
          supplierName: '示例: 杭州道友云',
          purchaseOrderName: '示例: 杭州道友云 - 第6份采购订单',
          productName: 'MQM8790 - HS2R',
          productNumber: 'CP0002',
          purchaseQuantity: 10,
          warehousingQuantity: 9,
          notWarehousedReturnQuantity: 0,
          warehousedReturnQuantity: 1,
          totalReturnQuantity: 1,
          toBeWarehousedQuantity: 1
        },
        {
          purchaseOrderNumber: 'CGDD230827 - 17',
          supplierName: '示例: 上海道友云',
          purchaseOrderName: '示例: 上海道友云 - 第7份采购订单',
          productName: 'UPS',
          productNumber: 'CP0005',
          purchaseQuantity: 50,
          warehousingQuantity: 40,
          notWarehousedReturnQuantity: 0,
          warehousedReturnQuantity: 0,
          totalReturnQuantity: 10,
          toBeWarehousedQuantity: 10
        },
        {
          purchaseOrderNumber: 'CGDD230827 - 10',
          supplierName: '示例: 上海道友云',
          purchaseOrderName: '示例: 上海道友云 - 第6份采购订单',
          productName: 'STI105',
          productNumber: 'CP0006',
          purchaseQuantity: 50,
          warehousingQuantity: 40,
          notWarehousedReturnQuantity: 0,
          warehousedReturnQuantity: 0,
          totalReturnQuantity: 10,
          toBeWarehousedQuantity: 10
        },
        {
          purchaseOrderNumber: 'CGDD230827 - 09',
          supplierName: '示例: 杭州道友云',
          purchaseOrderName: '示例: 杭州道友云 - 第5份采购订单',
          productName: 'MQM8790 - HS2R',
          productNumber: 'CP0002',
          purchaseQuantity: 100,
          warehousingQuantity: 90,
          notWarehousedReturnQuantity: 0,
          warehousedReturnQuantity: 0,
          totalReturnQuantity: 10,
          toBeWarehousedQuantity: 10
        },
        {
          purchaseOrderNumber: '汇总',
          supplierName: '',
          purchaseOrderName: '',
          productName: '',
          productNumber: '',
          purchaseQuantity: 410,
          warehousingQuantity: 179,
          notWarehousedReturnQuantity: 0,
          warehousedReturnQuantity: 1,
          totalReturnQuantity: 1,
          toBeWarehousedQuantity: 231
        }
      ]
    }
  }
}
</script>
